<template>
  <v-main>
    <v-divider></v-divider>
    <tags ref="tags"/>
    <v-divider />
    <v-container fluid class="content-container" :style="{height: `calc(100vh - ${height}px)`}">
      <keep-alive :include="cachedViews">
        <router-view :key="key"/>
      </keep-alive>
    </v-container>
  </v-main>
</template>

<script>
import tags from './tags'
export default {
  components: {
    tags
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  },
  data() {
    return {
      height: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$vuetify.application.top + (this.$refs?.tags?.$el.offsetHeight || 0)
    })
  }
}
</script>

<style scoped>
  .content-container {
    overflow: auto;
    background-color: #f5f5f5;
  }
</style>